<template>
  <div class="wrapper">
    <div class="top">
      <h4>首页 > 工资账套管理</h4>
    </div>
    <el-button type="primary" @click="showAdd()">+添加工资账套</el-button>

    <el-table :data="salary" style="width: 100%">
      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="name" label="账套名称"></el-table-column>
      <el-table-column prop="basicSalary" label="基本工资"></el-table-column>
      <el-table-column prop="trafficSalary" label="交通补助"></el-table-column>
      <el-table-column prop="lunchSalary" label="午餐补助"></el-table-column>
      <el-table-column prop="bonus" label="奖金"></el-table-column>
      <el-table-column prop="createDate" label="启用时间" width="100px"></el-table-column>
      <el-table-column prop="pensionBase" label="养老金比率"></el-table-column>
      <el-table-column prop="pensionPer" label="养老金基数"></el-table-column>
      <el-table-column
        prop="medicalBase"
        label="医疗保险比率"
      ></el-table-column>
      <el-table-column prop="medicalPer" label="医疗保险基数"></el-table-column>
      <el-table-column
        prop="accumulationFundBase"
        label="公积金比率"
      ></el-table-column>
      <el-table-column
        prop="accumulationFundPer"
        label="公积金基数"
      ></el-table-column>

      <el-table-column label="操作" width="200px">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="allUpdateSalary(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="salaryDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加 -->
    <el-dialog title="添加工资账套" :visible.sync="addDeptDialog">
      <el-form :model="salaryAdd" label-width="80px" :inline="true">
        <el-form-item label="账套名称:">
          <el-input v-model="salaryAdd.name"></el-input>
        </el-form-item>

        <el-form-item label="基本工资:">
          <el-input v-model="salaryAdd.basicSalary"></el-input>
        </el-form-item>

        <el-form-item label="奖金:">
          <el-input v-model="salaryAdd.bonus"></el-input>
        </el-form-item>

        <el-form-item label="午餐补助:">
          <el-input v-model="salaryAdd.lunchSalary"></el-input>
        </el-form-item>

        <el-form-item label="交通补助:">
          <el-input v-model="salaryAdd.trafficSalary"></el-input>
        </el-form-item>

        <el-form-item label="应发工资:">
          <el-input v-model="salaryAdd.allSalary"></el-input>
        </el-form-item>

        <el-form-item label="养老金基数:">
          <el-input v-model="salaryAdd.pensionBase"></el-input>
        </el-form-item>

        <el-form-item label="养老金比率:">
          <el-input v-model="salaryAdd.pensionPer"></el-input>
        </el-form-item>

        <el-form-item label="医疗基数:">
          <el-input v-model="salaryAdd.medicalBase"></el-input>
        </el-form-item>

        <el-form-item label="医疗保险比率:">
          <el-input v-model="salaryAdd.medicalPer"></el-input>
        </el-form-item>

        <el-form-item label="公积金基数:">
          <el-input v-model="salaryAdd.accumulationFundBase"></el-input>
        </el-form-item>

        <el-form-item label="公积金比率:">
          <el-input v-model="salaryAdd.accumulationFundPer"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="addSalary()">立即创建</el-button>
          <el-button @click="addDeptDialog = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 修改-->
    <el-dialog title="修改工资账套" :visible.sync="updateSalary">
      <el-form :model="salaryAdd" label-width="80px" :inline="true">
        <el-form-item label="账套名称:">
          <el-input v-model="salaryUpdate.name"></el-input>
        </el-form-item>

        <el-form-item label="基本工资:">
          <el-input v-model="salaryUpdate.basicSalary"></el-input>
        </el-form-item>

        <el-form-item label="奖金:">
          <el-input v-model="salaryUpdate.bonus"></el-input>
        </el-form-item>

        <el-form-item label="午餐补助:">
          <el-input v-model="salaryUpdate.lunchSalary"></el-input>
        </el-form-item>

        <el-form-item label="交通补助:">
          <el-input v-model="salaryUpdate.trafficSalary"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="realUpdateSalary()"
            >立即修改</el-button
          >
          <el-button @click="updateSalary = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "SalSob",
  data() {
    return {
      salary: [],
      addDeptDialog: false,
      updateSalary: false,
      salaryAdd: {
        id: "",
        name: "",
        basicSalary: "",
        bonus: "",
        lunchSalary: "",
        trafficSalary: "",
        allSalary: "",
        pensionBase: "",
        pensionPer: "",
        medicalBase: "",
        medicalPer: "",
        accumulationFundBase: "",
        accumulationFundPer: "",
      },
      salaryUpdate: {
        id: "",
        name: "",
        basicSalary: "",
        bonus: "",
        lunchSalary: "",
        trafficSalary: "",
      },
    };
  },
  created() {
    this.showAllSalary();
  },
  computed: {},
  filters: {},
  methods: {
    showAllSalary() {
      this.$axios.get("/SalaryController/listAllSalary").then((res) => {
        this.salary = res.data;
      });
    },
    showAdd() {
      this.addDeptDialog = true;
    },
    //添加
    addSalary() {
      this.$axios
        .post(
          "SalaryController/insertSalary",
          this.$qs.stringify(this.salaryAdd)
        )
        .then((response) => {
          if (response.data > 0) {
            alert("添加成功");
            this.showAllSalary();
            this.addDeptDialog = false;
          } else {
            alert("新增失败！");
          }
        })
        .catch((error) => {
          console.error(error);
        });
    },
    //删除
    salaryDelete(index, row) {
      console.log(this.salary[index].id);
      this.$confirm("你确定删除" + row.name + "吗").then(() => {
        this.$axios
          .get("SalaryController/delSalary?id=" + row.id)
          .then((res) => {
            this.$message(row.name + "删除成功");
            console.log("删除res返回结果是" + res.data);
            this.showAllSalary();
          }).catch((value) => {
            if (value != null) {
            this.$message({
              message: "该数据含有关联数据，删除失败",
              type: "error",
            });
          }
          })
      });
    },
    allUpdateSalary(index, row) {
      this.updateSalary = true;
      console.log(index, row);
      // 每个属性赋默认值
      this.salaryUpdate.id = row.id;
      this.salaryUpdate.name = row.name;
      this.salaryUpdate.basicSalary = row.basicSalary;
      this.salaryUpdate.bonus = row.bonus;
      this.salaryUpdate.lunchSalary = row.lunchSalary;
      this.salaryUpdate.trafficSalary = row.trafficSalary;
    },

    // 确定修改
    realUpdateSalary() {
      this.$axios
        .get(
          "SalaryController/updateSalary?name=" +
            this.salaryUpdate.name +
            "&basicSalary=" +
            this.salaryUpdate.basicSalary +
            "&bonus=" +
            this.salaryUpdate.bonus +
            "&lunchSalary=" +
            this.salaryUpdate.lunchSalary +
            "&trafficSalary=" +
            this.salaryUpdate.trafficSalary +
            "&id=" + this.salaryUpdate.id

        )
        .then((res) => {
          if (res.data >0) {
            console.log("修改操作状态码" + res.data);
            this.$message(this.salaryUpdate.name + "修改成功");
            this.updateSalary = false;
            this.showAllSalary();
          } else {
            alert("修改失败");
          }
        });
    },
  },
};
</script>

<style scoped>
.top {
  width: 20%;
  height: 5%;
  margin-left: 0%;
}
</style>
